<template>
	<view class="content">
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-red cur':''" v-for="(item,index) in navList" :key="index"
				 @tap="tabSelect" :data-id="index">
					<text @click="updata(item)">{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="details-list">
			<view class="list" v-for="(item,index) in jiluList" :key="index">
				<view class="list-title flex justify-between">
					<view>{{item.note}}</view>
					<text>+{{item.price}}</text>
					<!-- <text v-if="item.status == 0">审核中</text> -->
				</view>
				<view class="list-time">
					{{item.createTime}}
				</view>
			</view>
		</view>
	<!-- 	<view class="details-list" v-show="TabCur==1">
			<view class="list" v-for="(item,index) in 6" :key="index">
				<view class="list-title flex justify-between">
					<view>水晶提现</view>
					<text class="text-black">-20.00</text>
				</view>
				<view class="list-time">
					2020-07-24 13:23:43
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				navList: [{
					type: 7,
					status: 1,
					name: '充值记录'
				}, {
					type: 8,
					status: 2,
					name: '提现记录'
				}, ],
				TabCur: 0,
				scrollLeft: 0,
				allpages: 0,
				currentPage: 1,
				type: 7,
				status: 1,
				jiluList: []
			}
		},
		async onShow() {
			this.getList()
		},
		//分页
		async onReachBottom() {
			if (this.currentPage < this.allpages) {
				this.currentPage++;
				let params = {
					pageNum: this.currentPage,
					pageSize: 5,
					type: this.type,
					status: this.status
				};
				let data = await Api.apiCall('get', Api.money.shuijingList, params);
				this.currentPage = data.current; //当前页
				this.allpages = data.pages; //总页数
				this.jiluList = this.jiluList.concat(data.records);
				var that = this;
				for (let i = 0; i < that.jiluList.length; i++) {
					that.jiluList[i].createTime = that.newtime(that.jiluList[i].createTime);
				}
			} 
		},
		methods: {
			async tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.jiluList = [];
				let params = {
					pageNum: 1,
					pageSize: 5,
					type: this.type,
					status: this.status
				};
				let res = await Api.apiCall('get', Api.money.shuijingList, params);
				// //console.log('记录', res)
				for(let i = 0;i<res.records.length;i++){
					res.records[i].createTime = this.newtime(res.records[i].createTime)
				}
				this.allpages = res.pages;
				this.currentPage = res.current;
				this.jiluList = res.records
			},
			updata(item) {
				this.type = item.type;
				this.status = item.status;
			},
			// 获取记录
			async getList() {
				let params = {
					pageNum: 1,
					pageSize: 5,
					type: this.type,
					status: this.status
				};
				let res = await Api.apiCall('get', Api.money.shuijingList, params);
				// //console.log('记录', res)
				for(let i = 0;i<res.records.length;i++){
					res.records[i].createTime = this.newtime(res.records[i].createTime)
				}
				this.allpages = res.pages;
				this.currentPage = res.current;
				this.jiluList = res.records
			},
			newtime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				var strDate = Y + M + D + h + m + s;
				return strDate;
			},
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		background: #f5f5f5;

		.nav .cu-item {
			font-size: 36upx;
			color: #666;
			font-weight: bold;
		}

		.nav .cu-item.cur {
			color: #F94242;
		}

		.details-list {
			background: #fff;
			padding: 0 30upx;

			.list {
				padding: 36upx 0;
				border-bottom: 1upx solid #999;

				.list-title {
					font-weight: bold;

					view {
						font-size: 36upx;
						color: #333;
					}

					text {
						font-size: 42upx;
						color: #F94242;
					}
				}

				.list-time {
					font-size: 28upx;
					color: #999;
					padding-top: 25upx;
				}
			}
		}
	}
</style>
